<template>
    <section class="relative h-screen">
        <!-- 背景图片 -->
        <div class="absolute inset-0 overflow-hidden">
            <img src=".../../assets/hero.jpg" alt="Hero background" class="object-cover w-full h-full" />
        </div>

        <!-- 内容叠加层 -->
        <div class="relative z-10 flex items-center justify-center h-full bg-black bg-opacity-50">
            <div class="text-center text-white px-4 sm:px-6 lg:px-8">
                <h1 class="text-4xl sm:text-6xl font-bold tracking-tight" v-motion :initial="{ opacity: 0, y: 20 }"
                    :enter="{ opacity: 1, y: 0 }">
                    {{ t('hero.title') }}
                </h1>
                <p class="mt-6 text-xl sm:text-2xl max-w-3xl mx-auto">
                    {{ t('hero.subtitle') }}
                </p>
                <div class="mt-10">
                    <button
                        class="bg-white text-black px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                        {{ t('hero.cta') }}
                    </button>
                </div>
            </div>
        </div>
    </section>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>